<template>
    <view class="u-steps" :class="[`u-steps--${direction}`]">
        <slot></slot>
    </view>
</template>

<script>
import { props } from './props'
import { mpMixin } from '../../libs/mixin/mpMixin'
import { mixin } from '../../libs/mixin/mixin'
import test from '../../libs/function/test'
/**
 * Steps 步骤条
 * @description 该组件一般用于完成一个任务要分几个步骤，标识目前处于第几步的场景。
 * @tutorial https://uview-plus.jiangruyi.com/components/steps.html
 * @property {String}			direction		row-横向，column-竖向 (默认 'row' )
 * @property {String | Number}	current			设置当前处于第几步 (默认 0 )
 * @property {String}			activeColor		激活状态颜色 (默认 '#da8c10' )
 * @property {String}			inactiveColor	未激活状态颜色 (默认 '#969799' )
 * @property {String}			activeIcon		激活状态的图标
 * @property {String}			inactiveIcon	未激活状态图标
 * @property {Boolean}			dot				是否显示点类型 (默认 false )
 * @example <u-steps current="0"><u-steps-item title="已出库" desc="10:35" ></u-steps-item></u-steps>
 */
export default {
    name: 'u-steps',
    mixins: [mpMixin, mixin, props],
    data() {
        return {}
    },
    watch: {
        children() {
            this.updateChildData()
        },
        parentData() {
            this.updateChildData()
        }
    },
    computed: {
        // 监听参数的变化，通过watch中，手动去更新子组件的数据，否则子组件不会自动变化
        parentData() {
            return [
                this.current,
                this.direction,
                this.activeColor,
                this.inactiveColor,
                this.activeIcon,
                this.inactiveIcon,
                this.dot
            ]
        }
    },
    methods: {
        // 更新子组件的数据
        updateChildData() {
            this.children.map(child => {
                // 先判断子组件是否存在对应的方法
                test.func((child || {}).updateFromParent()) && child.updateFromParent()
            })
        },
        // 接受子组件的通知，去修改其他子组件的数据
        updateFromChild() {
            this.updateChildData()
        }
    },
    created() {
        this.children = []
    },
    options: {
        virtualHost: false
    }
}
</script>

<style lang="scss" scoped>
@import '../../libs/css/components.scss';

.u-steps {
    @include flex;

    &--column {
        flex-direction: column;
    }

    &--row {
        flex-direction: row;
        flex: 1;
        /* #ifdef MP */
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        /* #endif */
    }
}
</style>
